import React, { useRef, useState, useEffect } from 'react';
import {
    Input,
    Select,
    Form, message,
    Modal
} from 'antd';
import PropTypes from 'prop-types';
const YzhDialog = (props) => {
    const [form] = Form.useForm();
    const [state, setState] = useState({
        visible: false,
        ...props
    });
    useEffect(() => {
        setState({
            ...state,
            visible: props.visible
        })
    }, [props.visible])
    const onOk = (values) => {
        if (props.form) {
            form
                .validateFields()
                .then((values) => {
                    props.onOk(values).then(() => {
                        setState({
                            ...state,
                            visible: false,
                        })
                    }).catch(() => { })
                })
                .catch((info) => {
                    console.log('Validate Failed:', info);
                });
        } else {
            props.onOk(values).then(() => {
                setState({
                    ...state,
                    visible: false,
                })
            }).catch(() => { })
        }
    }
    const { visible } = state
    return (
        <Modal
            maskClosable={false}
            centered
            width={460}
            visible={visible}
            {...props.props}
            wrapClassName={`yzh-modal ${props.props.wrapClassName}`}
            onOk={onOk}
            onCancel={() => {
                setState({
                    ...state,
                    visible: false,
                })
                props.form && form.resetFields()
                props.onCancel && props.onCancel()
            }}
        >
            {props.form ? <Form
                name="dialogForm"
                form={form}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                initialValues={{}}
                autoComplete="off"
                {...props.form}
            >
                {props.children}
            </Form> : props.children}
        </Modal>
    );
};
YzhDialog.propTypes = {
    visible: PropTypes.oneOfType([PropTypes.bool.isRequired]),
    form: PropTypes.oneOfType([PropTypes.object]),
    onOk: PropTypes.oneOfType([PropTypes.func]),
    props: PropTypes.oneOfType([PropTypes.object]),
    onCancel: PropTypes.oneOfType([PropTypes.func]),
    // optionalArray: PropTypes.array, //检测数组类型
    // optionalBool: PropTypes.bool, //检测布尔类型
    // optionalFunc: PropTypes.func, //检测函数（Function类型）
    // optionalNumber: PropTypes.number, //检测数字
    // optionalObject: PropTypes.object, //检测对象
    // optionalString: PropTypes.string, //检测字符串
    // optionalSymbol: PropTypes.symbol, //ES6新增的symbol类型
}
export default YzhDialog